<template>
  <view class="history-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-btn" @click="navigateBack">
        <uni-icons type="left" size="24" color="#333"></uni-icons>
      </view>
      <view class="title">浏览记录</view>
      <view class="clear-btn" @click="showClearConfirm" v-if="historyList.length > 0">
        <text class="clear-text">清除</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="historyList.length === 0">
      <uni-icons type="history" size="80" color="#ddd" class="empty-icon"></uni-icons>
      <text class="empty-text">暂无浏览记录</text>
      <button class="empty-btn" @click="gotoNewsList">去逛逛</button>
    </view>

    <!-- 历史记录列表 -->
    <view class="history-list" v-if="historyList.length > 0">
      <!-- 按日期分组 -->
      <view v-for="(group, date) in groupedHistory" :key="date">
        <view class="date-title">{{ date }}</view>
        
        <view 
          class="history-item" 
          v-for="(item, index) in group" 
          :key="index"
          @click="gotoDetail(item)"
        >
          <image 
            :src="item.image || '/static/news/default-news.png'" 
            mode="aspectFill"
            class="history-img"
            :alt="item.title"
          ></image>
          
          <view class="history-content">
            <text class="history-title">{{ item.title }}</text>
            <view class="history-info">
              <text class="history-source">{{ item.source }}</text>
              <text class="history-type">{{ item.type === 'article' ? '文章' : '微头条' }}</text>
              <text class="history-time">{{ formatTime(item.time) }}</text>
            </view>
          </view>
          
          <view class="delete-btn" @click.stop="deleteHistory(item.id)">
            <uni-icons type="trash" size="24" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      historyList: [],
      groupedHistory: {}
    };
  },
  
  onLoad() {
    // 加载浏览记录
    this.loadHistory();
  },
  
  onShow() {
    // 页面显示时刷新记录
    this.loadHistory();
  },
  
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 加载浏览记录
    loadHistory() {
      const history = uni.getStorageSync('newsHistory') || [];
      this.historyList = history;
      // 按日期分组
      this.groupHistoryByDate();
    },
    
    // 按日期分组
    groupHistoryByDate() {
      const groups = {};
      
      this.historyList.forEach(item => {
        // 解析时间
        const date = new Date(item.time);
        let dateStr = '';
        
        // 判断是今天、昨天还是其他日期
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        const yesterday = new Date(today);
        yesterday.setDate(yesterday.getDate() - 1);
        
        if (date >= today) {
          dateStr = '今天';
        } else if (date >= yesterday) {
          dateStr = '昨天';
        } else {
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          const day = date.getDate();
          dateStr = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        }
        
        // 分组
        if (!groups[dateStr]) {
          groups[dateStr] = [];
        }
        groups[dateStr].push(item);
      });
      
      this.groupedHistory = groups;
    },
    
    // 格式化时间
    formatTime(timeStr) {
      const date = new Date(timeStr);
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    
    // 跳转到详情页
    gotoDetail(item) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${item.id}`
      });
    },
    
    // 跳转到资讯列表页
    gotoNewsList() {
      uni.switchTab({
        url: '/pages/news/index'
      });
    },
    
    // 删除单条记录
    deleteHistory(id) {
      this.historyList = this.historyList.filter(item => item.id !== id);
      uni.setStorageSync('newsHistory', this.historyList);
      this.groupHistoryByDate();
    },
    
    // 显示清除确认
    showClearConfirm() {
      uni.showModal({
        title: '提示',
        content: '确定要清除所有浏览记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.clearAllHistory();
          }
        }
      });
    },
    
    // 清除所有记录
    clearAllHistory() {
      this.historyList = [];
      uni.removeStorageSync('newsHistory');
      this.groupedHistory = {};
    }
  }
};
</script>

<style lang="scss" scoped>
.history-page {
  background-color: #f5f5f7;
  min-height: 100vh;
}

// 导航栏样式
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;

  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    flex: 1;
    text-align: center;
  }

  .clear-btn {
    width: 80rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .clear-text {
      font-size: 30rpx;
      color: #1677FF;
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  .empty-icon {
    margin-bottom: 30rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
  }

  .empty-btn {
    background-color: #1677FF;
    color: #fff;
    border: none;
    width: 200rpx;
    height: 70rpx;
    border-radius: 35rpx;
    font-size: 28rpx;
  }
}

// 历史记录列表
.history-list {
  padding: 20rpx;
}

.date-title {
  font-size: 26rpx;
  color: #999;
  padding: 15rpx 10rpx;
}

.history-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.history-img {
  width: 120rpx;
  height: 90rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.history-content {
  flex: 1;
  margin: 0 15rpx;

  .history-title {
    font-size: 26rpx;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5rpx;
  }

  .history-info {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #999;

    .history-source, .history-type {
      margin-right: 15rpx;
      white-space: nowrap;
    }

    .history-time {
      margin-left: auto;
    }
  }
}

.delete-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
</style>
